{% extends'base.html' %}
{% block title %}首页{% endblock %}
{% block nav %}仪表盘{% endblock %}

{% block Sidebar %}
    <div class="sidebar" data-color="orange">
        <!--
    提示1：您可以更改的颜色 侧边栏使用: data-color="blue | green | orange | red | yellow"
-->
        <div class="logo">
            <a href="#" class="simple-text logo-mini">
                <img src="../static/assets/img/taobaologo.png" alt="#"/>
            </a>
            <a href="#" class="simple-text logo-normal">
                电商平台用户行为预测系统
            </a>
        </div>
        <div class="sidebar-wrapper">
            <ul class="nav">
                <li class="active">
                    <a href="{{ url_for('ec.index') }}">
                        <i class="now-ui-icons design_app"></i>
                        <p>仪表盘</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.raw_data') }}">
                        <i class="now-ui-icons business_chart-pie-36"></i>
                        <p>原始数据</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.visual2') }}">
                        <i class="now-ui-icons education_atom"></i>
                        <p>预测与推荐</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.visual') }}">
                        <i class="now-ui-icons files_single-copy-04"></i>
                        <p>操作日志</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.user') }}">
                        <i class="now-ui-icons users_single-02"></i>
                        <p>个人中心</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
{% endblock %}

{% block content %}
    <div class="panel-header panel-header-lg" style="background: linear-gradient(135deg, #F5F5F5 0%, #1c84fc 100%);">
        <div class="header-text text-center">
            <h2 class="text-white">用户行为分析仪表盘</h2>
        </div>
        <canvas id="dailyBehaviorChart"></canvas>
    </div>
    <div></div>
    <div class="content">
        <!-- 第一行卡片 -->
        <div class="row">
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card card-chart">
                    <div class="card-header" style="background: linear-gradient(60deg, #ffa726, #fb8c00);">
                        <h5 class="card-category text-white">用户行为统计</h5>
                        <h4 class="card-title text-white">用户整体行为分布</h4>
                    </div>
                    <div class="card-body" style="height: 420px; position: relative;">
                        <canvas id="behaviorPieChart"></canvas>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="now-ui-icons arrows-1_refresh-69"></i> 实时更新
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 col-md-6 mb-4">
                <div class="card card-chart">
                    <div class="card-header" style="background: linear-gradient(60deg, #66bb6a, #43a047);">
                        <h5 class="card-category text-white">用户行为统计</h5>
                        <h4 class="card-title text-white">每小时行为趋势分析</h4>
                    </div>
                    <div class="card-body" style="height: 420px; position: relative;">
                        <canvas id="hourlyBehaviorChart"></canvas>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="now-ui-icons ui-2_time-alarm"></i> 24小时数据
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第二行卡片 -->
        <div class="row">
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card card-chart">
                    <div class="card-header" style="background: linear-gradient(60deg, #26c6da, #00acc1);">
                        <h5 class="card-category text-white">商品分析</h5>
                        <h4 class="card-title text-white">点击量Top10商品</h4>
                    </div>
                    <div class="card-body" style="height: 400px;">
                        <canvas id="top10ItemsPvChart"></canvas>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="now-ui-icons shopping_tag-content"></i> 热门商品
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card card-chart">
                    <div class="card-header" style="background: linear-gradient(60deg, #ef5350, #e53935);">
                        <h5 class="card-category text-white">商品分析</h5>
                        <h4 class="card-title text-white">购买量Top10商品</h4>
                    </div>
                    <div class="card-body" style="height: 400px;">
                        <canvas id="top10ItemsBuyChart"></canvas>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="now-ui-icons shopping_basket"></i> 热销商品
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card card-chart">
                    <div class="card-header" style="background: linear-gradient(60deg, #ab47bc, #8e24aa);">
                        <h5 class="card-category text-white">类别分析</h5>
                        <h4 class="card-title text-white">购买量Top10商品类别</h4>
                    </div>
                    <div class="card-body" style="height: 400px;">
                        <canvas id="top10CategoriesBuyChart"></canvas>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="now-ui-icons shopping_shop"></i> 热门类别
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第三行卡片 -->
        <div class="row">
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card card-chart">
                    <div class="card-header" style="background: linear-gradient(60deg, #5c6bc0, #3949ab);">
                        <h5 class="card-category text-white">转化率分析</h5>
                        <h4 class="card-title text-white">点击→加购→购买 转化率</h4>
                    </div>
                    <div class="card-body" style="height: 400px;">
                        <canvas id="pvCartBuyChart"></canvas>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="now-ui-icons business_chart-bar-32"></i> 转化漏斗
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card card-chart">
                    <div class="card-header" style="background: linear-gradient(60deg, #26a69a, #00897b);">
                        <h5 class="card-category text-white">转化率分析</h5>
                        <h4 class="card-title text-white">点击→收藏→购买 转化率</h4>
                    </div>
                    <div class="card-body" style="height: 400px;">
                        <canvas id="pvFavBuyChart"></canvas>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="now-ui-icons ui-2_favourite-28"></i> 收藏转化
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card card-chart">
                    <div class="card-header" style="background: linear-gradient(60deg, #ff7043, #f4511e);">
                        <h5 class="card-category text-white">转化率分析</h5>
                        <h4 class="card-title text-white">加购→购买 转化率</h4>
                    </div>
                    <div class="card-body" style="height: 400px;">
                        <canvas id="cartBuyChart"></canvas>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="now-ui-icons shopping_cart-simple"></i> 购物车转化
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="../static/assets/js/ec1.js"></script>
    <script src="../static/assets/js/index.js"></script>
{% endblock %}